<script setup lang="ts">
import {computed} from "vue";

const props = defineProps(['option'])

const option = computed(() => props.option)

function cancel() {
  window.api.cancel(option.value.id)
}

function confirm() {
  window.api.confirm(option.value.id)
}
</script>

<template>
  <div class="outbox">
    <div class="message-box" v-html="option.msg">

    </div>
    <div class="btn-box">
      <el-button @click="cancel"
                 v-if="option.cancelButtonText">
        {{ option.cancelButtonText }}
      </el-button>
      <el-button type="primary" @click="confirm">
        {{ option.confirmButtonText || '确定' }}
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.outbox {
  height: 100%;
  //padding-left: 15px;
  //padding-top: 15px;
  box-sizing: border-box;

  .message-box {
    height: calc(100% - 39px);
    font-size: 14px;
    overflow: auto;
  }

  .btn-box {
    height: 39px;
    text-align: end;
    //padding-right: 15px;
    align-content: end;

    button {
      //color: white;
      width: 80px;
      cursor: default;
      //background-color: var(--main-color);
      //
      //&:hover {
      //  background-color: var(--main-hover-color);
      //}
    }
  }
}
</style>